<template>
  
  <empty positions="absolute"  :empty="!isloading && data.length <= 0" :zIndexs="100"
    	:imgUrl="'https://cdn-static.yekjx.com/'+'food/empty/images/empty_ico04.png'" content="暂无评价记录">
  </empty>
  <view class="my-evalua" v-if="data&&data.length > 0">
    <view class="evla-title eva-w">
      <text>共{{totalRows}}条评论</text>
    </view>
    <view class="evla-ul eva-w">
      <view class="li-con" v-for="(item,index) in data" :key="index">
        <view class="flex align-center justify-between">
          <view class="left-con flex align-center" @click.stop="toDetails(item)">
            <image src="../../../static/default_avos.png" ></image>
            <view class="dianming">{{ item.vnick }}</view>
            <text class="cuIcon-right"></text>
          </view>
          <view class="right-con">{{item.time}}</view>
        </view>
        <view class="menu-con">
          <text class="caidan-text">{{item.goodsSkuNamesString}}</text>
        </view>
        <view class="business-con">
          <text class="text-bus">{{item.content}}</text>
          <view class="img-con flex  flex-wrap" v-if="item.imList.length > 0">
            <image v-for="(imgSrc,ind) in item.imList" @click.stop="handelPre(item.imList,ind)" :src="imgSrc" mode="" :key="ind"></image>
          </view>
        </view>
        <view class="hr-border"></view>
        <view class="shangjiahuifu" v-if="item.reply_content">
          <view class="sj-top">
            <text class="fcon-huifu"></text>
            <text class="huifu-text">商家回复</text>
          </view>
          <view class="sj-bott">{{item.reply_content}}</view>
        </view>
        <view class="posi-remove" @click="tapDelItem(item.goods_discuss_id)">
          <text class="fcon-a-Frame427320510"></text>
          <text class="remove-text">删除</text>
        </view>
      </view>
    </view>
  </view>
  <loading></loading>
  <view class="flex justify-center">
    <uni-load-more :status="loadStatus" iconType="circle"></uni-load-more>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from "vue"
  import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app"
  import { mnavTo, showLoading, hideLoading, checkOrg } from '@/utils/helper'
  import { env } from '@/api/env.js'
  import { getmyEvaluation,evaluateDele } from '@/api/vmeitime-http/index.js'
  import mapi from '@/utils/mapi'
  const isloading = ref(false) //是否正在请求数据
  const loadStatus = ref('noMore')  //没有更多了
  const totalRows = ref(0)  //评价总数
  const data = ref([])
  // const data = ref([{
  //   name : '炖大侠· 枫林湾店',
  //   titme:'2024.10.2',
  //   vphone:'../../../static/default_avos.png',
  //   content:'好吃的！！尤其那个辣椒酱，绝了。明日份继续回购~~~',
  //   menuText:'橄榄油老姜云耳炒鸡100g+油酸菜肉末青皮豆100g+橄榄油胡萝卜丝炒百合260g',
  //   img:['https://test-cdn-static.yekjx.com/resouces/goods/1726282266877.jpg','https://test-cdn-static.yekjx.com/resouces/goods/1726282266877.jpg','https://test-cdn-static.yekjx.com/resouces/goods/1726213832228.jpg','https://test-cdn-static.yekjx.com/resouces/goods/1726280811586.jpg'],
  //   sjhuifu:'您的好评就是对我们最大的鼓励， 再次感谢您的支持，助您用餐愉快！'
  // },
  // {
  //   name : '炖大侠· 汽车东店',
  //   titme:'2024.10.2',
  //   vphone:'../../../static/default_avos.png',
  //   content:'好吃的！！尤其那个辣椒酱，绝了。明日份继续回购~~~',
  //   menuText:'橄榄油老姜云耳炒鸡100g+油酸菜肉末青皮豆100g+橄榄油胡萝卜丝炒百合260g',
  //   img:['https://test-cdn-static.yekjx.com/resouces/goods/1726282266877.jpg','https://test-cdn-static.yekjx.com/resouces/goods/1726213832228.jpg','https://test-cdn-static.yekjx.com/resouces/goods/1726280811586.jpg'],
  //   sjhuifu:'您的好评就是对我们最大的鼓励， 再次感谢您的支持，助您用餐愉快！'
  // }])
  const commentList = ref([])  //评价列表
  const pageInfo = ref({
  	curPage: 1,
  	pageSize: 4,
  	backCupPage: 2,
  	total: 0
  })
  onLoad(()=>{
    getLabel()
  })
  onReachBottom(() => {
      // 检查是否还有下一页数据
      const { curPage, pageSize, total } = pageInfo.value;
      // 如果当前页的总记录数已达到或超过总数，设置加载状态为 'noMore'
      if (curPage * pageSize >= total) {
          loadStatus.value = 'noMore';
          console.log('调用了-----------------------')
          isloading.value = false
          return;
      }
      // 防止重复加载
      if (isloading.value) return;
      // 页码自增
      pageInfo.value.curPage += 1;
      // 加载下一页数据
      getLabel();
  });
  //评价列表
  const getLabel = async () => {
  	// if(!isLogin.value) return
  	// console.log('我是获取评价列表的接口')
  	// ** 打开节流阀
    loadStatus.value = 'loading'
  	isloading.value = true
  	try {
  		showLoading()
  		let res = await getmyEvaluation({
  			curPage: pageInfo.value.curPage,
  			pageSize: pageInfo.value.pageSize,
  		})
  		hideLoading();
  		if (res.result && res.object) {
        if (res.object.length == 0) {
        	loadStatus.value = 'noMore'
        	return
        }
        if (res.page.curPage == res.page.nextPage) {
        	loadStatus.value = 'noMore'
        } else {
        	loadStatus.value = 'more'
        }
  			const { page, object } = res
  			totalRows.value = page.totalRows
  			pageInfo.value.total = page.totalRows
  			res.object.forEach((item : any, index : any) => {
  				const { create_date, image1, image2, image3, image4 } = item
  				item.time = `${create_date.slice(0, 4)}-${create_date.slice(4, 6)}-${create_date.slice(6, 8)}`
  				// item.imList.push(image1)
  				const images = [image1, image2, image3, image4].filter(img => img); // 过滤掉空值
  				item.imList = images.map(img => env.imgBaseUrl + img);
          // 获取 goodsSkuName
          const goodsSkuNames = item.billGoods.map(billItem => billItem.goodsSkuName).filter(name => name); // 过滤掉空值
      
          // 菜单根据数量拼接字符串
          if (goodsSkuNames.length === 1) {
              item.goodsSkuNamesString = goodsSkuNames[0]; // 只有一个时直接使用
          } else if (goodsSkuNames.length > 1) {
              item.goodsSkuNamesString = goodsSkuNames.join(' + ');
          } else {
              item.goodsSkuNamesString = ''; 
          }
  			})
  			data.value = [...data.value, ...object]
  		}
      isloading.value = false
      console.log(data.value,'评价列表')
  	} catch (e) {
  		hideLoading();
      isloading.value = false
  		mapi.msg('评价列表网络繁忙~~~~~~~~~~~~，请稍后再试!');
  	}
  }
  // 去详情
  const toDetails = (item : any) => {
  	// let {status,type,Invoicing,text,activeType} = item
  	mnavTo('/pages/order/orderDetails/orderDetails?vbill_id=' + item.bill_id + '&activeType=' + '' + '&type=' + '1')
  }
  //删除
  const tapDelItem = async (id : any) => {
    const idStr = String(id)
  	console.log('---------------------------------', typeof(idStr));
  	// scrClass.value = index
   //  sourceFlag.value = false
  	uni.showModal({
  		title: '提示',
  		content: '确定删除此条评价信息吗？',
  		success: function (e) {
  			if (e.confirm) {
  				console.log('删除')
          deleEva(idStr)
  			}
  		}
  	})
  }
  const deleEva = async (id : any) => {
  	try {
  		let res = await evaluateDele({
  			goodsDiscussId: id
  		})
  		if (res.result) {
        pageInfo.value.curPage = 1
        pageInfo.value.pageSize = 4
        data.value = []
        getLabel()
  			// getAddressListData()
  		}else{
  			hideLoading();
  			mapi.msg(res.shortMessage||'网络繁忙，请稍后再试!');
  		}
  	} catch (e) {
  		hideLoading();
  		mapi.msg('网络繁忙，请稍后再试!');
  	}
  }
  //图片
  const handelPre = (item : any, index : any) => {
    console.log('handelPre-----------------',item)
  	uni.previewImage({
  		current: item[index],
  		urls: item,
  		success: () => {
  			console.log("111")
  		}
  	})
  }
</script>

<style lang="scss" scoped>
.fcon-huifu{
  font-size: 26rpx;
  margin-right: 10rpx;
}
.eva-w{
  width: 693.656rpx;
  margin: 0 auto;
}
.evla-title{
  color: #333;
  font-size: 28rpx;
  font-weight: 400;
  padding: 30rpx 0;
}
.hr-border{
  width: 100%;
  background: rgba(153, 153, 153, 0.05);
  height: 2rpx;
}
.li-con{
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-bottom: 30rpx;
  padding: 24rpx 24rpx 90rpx 24rpx;
  position: relative;
  &:last-child{
    margin-bottom: 0rpx;
  }
  .posi-remove{
    position: absolute;
    right: 24rpx;
    bottom: 34rpx;
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
    .remove-text{
      margin-left: 10rpx;
    }
  }
  .left-con{
    image{
      width:64rpx;
      margin-right: 24rpx;
      height:64rpx;
      border-radius: 50%;
    }
  }
  .dianming{
    color: #333;
    font-size: 28rpx;
    font-weight: 700;
  }
  .cuIcon-right{
    color: #666;
  }
  .tiem-style{
    color: #999;
    font-size: 28rpx;
    font-weight: 400;
  }
  .business-con{
    .text-bus{
      color: #333;
      font-size: 32rpx;
      font-weight: 400;
      padding: 30rpx 0;
      display: block;
    }
    .img-con{
      flex-wrap: wrap;
      padding-top: 20rpx;
      margin-bottom: 30rpx;
      image{
        width: 30.33%;
        height: 160rpx;
        margin-bottom: 20rpx;
        margin-right: 29rpx;
        &:nth-child(3n) {
            margin-right: 0rpx;
        }
      }
    }
  }
  .menu-con{
    width: 650.0498rpx;
    border-radius: 20rpx;
    background: #F8F8FA;
    padding: 20rpx;
    margin-top: 10rpx;
    .caidan-text{
      color: #999;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 30rpx;
    }
  }
  .right-con{
    color: #999;
    font-size: 28rpx;
    font-weight: 400;
  }
  .sj-bott{
    color: #999;
    font-size: 24rpx;
    font-weight: 400;
    margin-top: 10rpx;
    line-height: 33rpx;
  }
  .sj-top{
    color: #999;
    font-size: 28rpx;
    font-weight: 400;
    margin-top: 30rpx;
    .fcon-logo{
      margin-right: 15rpx;
    }
    
  }
}
</style>
